<template>
    <div class="body">
      <ul class="processLIST common_bg_fff">
        <li class="process_li">
          <i class="inlineBlockIcon logo_mei" :class="status>0?'logo_you':'logo_mei'"></i>
          <span class="font_333_28">{{status>0?'已接单':'待接单'}}</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon logo_mei" :class="status>1?'logo_you':'logo_mei'"></i>
          <span class="font_333_28">{{status>1?'已支付':'待支付'}}</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon logo_mei" :class="status>2?'logo_you':'logo_mei'"></i>
          <span class="font_333_28">{{status>2?'已评价':'待评价'}}</span>
        </li>
        <li class="shenglue"><span class="iconfont icon-more"></span></li>
        <li class="process_li">
          <i class="inlineBlockIcon logo_mei" :class="status>=3?'logo_you':'logo_mei'"></i>
          <span class="font_333_28">{{status>=3?'已完成':'待完成'}}</span>
        </li>
      </ul>

      <!--如果是公司的订单-->
      <div class="common_bg_fff info_list isCompanyBOX" v-show="com_name">
        <div class="infoTYPEBOX">
          <i class="iconfont icon-qiye1"></i>
          <span class="font_666_28">公司名称</span>
        </div>
        <p class="font_333_28">{{com_name}}</p>
      </div>
      <!--订单类型-->
      <!--<div class="common_bg_fff orderType">-->
        <!--<div class="TYPElogo"><i class="inlineBlockIcon " :class="recovery_type=='纸类'?'zhi':'suliao'"></i></div>-->
        <!--<p class="font_333_30">{{recovery_type}}({{recovery_price}}元/千克)</p>-->
      <!--</div>-->

      <!--订单信息-->
      <ul class="common_bg_fff orderInfo">
        <li class="info_list">
          <div class="infoTYPEBOX">
            <i class="iconfont icon-dingdan"></i>
            <span class="font_666_28">订单编号</span>
          </div>
          <p class="font_333_28">{{order_num}}</p>
        </li>
        <li class="info_list">
          <div class="infoTYPEBOX">
            <i class="iconfont icon-xiazai"></i>
            <span class="font_666_28">下单人</span>
          </div>
          <p class="font_333_28">{{yuyue_user}}</p>
        </li>
        <li class="info_list">
          <div class="infoTYPEBOX">
            <i class="iconfont icon-dizhi"></i>
            <span class="font_666_28">地址</span>
          </div>
          <p class="font_333_28">{{yuyue_adress}}</p>
        </li>
        <li class="info_list">
          <div class="infoTYPEBOX">
            <i class="iconfont icon-dianhua"></i>
            <span class="font_666_28">联系方式</span>
          </div>
          <!--<p class="font_333_28">{{yuyue_tel}}</p>-->
          <a :href="'tel:'+yuyue_tel" class="font_333_28">{{yuyue_tel}}</a>
        </li>
        <li class="info_list">
          <div class="infoTYPEBOX">
            <i class="iconfont icon-shijian"></i>
            <span class="font_666_28">创建时间</span>
          </div>
          <p class="font_333_28">{{create_time}}</p>
        </li>
      </ul>

      <!--回收类型-->
      <div class="common_bg_fff info_list isCompanyBOX">
        <div class="infoTYPEBOX">
          <i class="iconfont icon-leixing"></i>
          <span class="font_666_28">回收类型</span>
        </div>
        <p class="font_333_28">{{recovery}}</p>
      </div>
      <!--备注-->
      <div class="tips common_bg_fff" v-show=" remark || imgList.length>0 ">
        <p class="tips_title">
          <i class="iconfont icon-beizhu"></i>
          <span class="font_666_28">备注</span>
        </p>
        <div class="tipsBOX">
          <p class="remarkText font_666_30">{{remark}}</p>
          <ul class="imgLIST" v-if="imgList.length>0">
            <li v-for="(item, index) in imgList">
              <img :src="baseURL+item" alt="" @click="show(baseURL+item)">
            </li>
          </ul>
        </div>
      </div>

      <!--取消按钮-->
      <div class="cancelOrderBTNBOX common_bg_fff" v-show="status == 0" @click="SureCancel">
        <div>取消订单</div>
      </div>

      <!--上门人员-->
      <ul class="common_bg_fff staffINFO" v-show="status>0">
        <li class="staffINFO_list">
          <span class="font_666_28">回收人员</span>
          <span class="font_333_28">{{recovery_name}}</span>
        </li>
        <li class="staffINFO_list">
          <span class="font_666_28">联系方式</span>
          <!--<span class="font_333_28">{{recovery_tel}}</span>-->
          <a :href="'tel:'+recovery_tel" class="font_333_28">{{recovery_tel}}</a>
        </li>
        <li class="staffINFO_list">
          <span class="font_666_28">上门时间</span>
          <span class="font_333_28">{{recovery_time}}</span>
        </li>
      </ul>

      <!--取消订单-->
      <div class="cancelOrder common_bg_fff" v-show="status < 0">
        <p class="font_333_30">订单已被取消</p>
        <p class="font_333_30">{{cancel_reason}}</p>
      </div>

      <!--总价-->
      <div class="common_bg_fff info_list isCompanyBOX allTOTAL"  v-show="status>1">
        <p class="">总价(元)</p>
        <p class="">{{total}}</p>
      </div>

      <!--订单合计-->
      <ul class="common_bg_fff orderTotal" v-if="status>1">
        <li v-show="orderTotal_list.length>2" class="orderTotal_title" @click="showMore">
          <i class="font_999_28 iconfont icon-shangxiazuoyou-" v-show="!showNumber_jiantou"></i>
          <i class="font_999_28 iconfont icon-shangxiazuoyou-1" v-show="showNumber_jiantou"></i>
          <span class="font_999_28">{{orderTotal_title}}</span>
        </li>
        <transition-group name="fade">
          <li v-for="(item,index) in orderTotal_list" v-show="index<=showNumber" v-bind:key="index">
            <ul>
              <li class="totalINFO_list">
                <span class="font_333_28">品类</span>
                <span class="font_333_28">{{item.class_name}}</span>
              </li>
              <li class="totalINFO_list">
                <span class="font_333_28">单价</span>
                <span class="font_333_28">{{item.price}}元/千克</span>
              </li>
              <li class="totalINFO_list">
                <span class="font_333_28">重量(kg)</span>
                <span class="font_333_28">{{item.weight}}</span>
              </li>
              <li class="totalINFO_list last_totalINFO_list">
                <span class="font_333_28">小计(元)</span>
                <span class="font_333_28">{{item.total}}</span>
              </li>
            </ul>
          </li>
        </transition-group>
      </ul>

      <!--评价-->
      <div class="pinjia common_bg_fff" v-show="status>2">
        <p class="font_333_30">评价</p>
        <div class="pinjiabox">
          <p class="font_333_30">{{pinjia_content}}</p>
          <ul class="pinjiaLIST">
            <li>
              <span class="font_777_26">服务态度</span>
              <ul class="pinjia_start">
                <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=fuwu_startN}"></li>
              </ul>
            </li>
            <li>
              <span class="font_777_26">称重准确</span>
              <ul class="pinjia_start">
                <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=zhongliang_startN}"></li>
              </ul>
            </li>
            <li>
              <span class="font_777_26">时间准时</span>
              <ul class="pinjia_start">
                <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=time_startN}"></li>
              </ul>
            </li>
            <li>
              <span class="font_777_26">操作专业</span>
              <ul class="pinjia_start">
                <li class="inlineBlockIcon" v-for="n in 5" :class="{'active':n<=zhuanye_startN}"></li>
              </ul>
            </li>
          </ul>

        </div>
      </div>

      <!--去评价按钮-->
      <div class="btn font_fff_36" @click="linkTOpinjia" v-show="status>1&&status<3">去评价</div>

      <div v-show="showBIGIMG" id="bigIMG" @click="closeBIGIMG">
        <img :src="bigIMG" alt="">
      </div>

      <div class="comon_bg_black" v-show="isSureCancel">
        <div class="choice_box common_bg_fff">
          <p class="font_333_34">您确定取消订单吗？</p>
          <ul class="choice_btn">
            <li @click="cancelCancelOrder">再想想</li>
            <li @click="cancelOrder">确定</li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import lu from '@/assets/public.js'
    export default {
        name: '',
        components: {},
        data() {
            return {
              baseURL:this.axios.defaults.baseURL,
              title:'订单详情',
              order_id:null,//订单id
              status:null,//进行状态码
              com_name:'',//公司名字
              recovery:'',//回收类型
              recovery_type:'',
              recovery_price:'',
              recovery_weight:'',
              recovery_money:'',
              order_num:'',//订单号
              yuyue_user:'',//预约人
              yuyue_adress:'',//预约地址
              yuyue_tel:'',//预约电话
              create_time:'',//订单创建时间
              imgList:[],//图片列表
              remark:'',//备注
              cancel_reason:null,//取消原因
              recovery_name:'',//回收人员名字
              recovery_tel:'',//回收人员电话
              recovery_time:'',//回收人员上门时间
              total:0,//总价
              orderTotal_list:[],//订单详情列表
              orderTotal_title:'展开显示更多',//订单详情列表上面的文字
              showNumber_jiantou:false,//箭头的上还是下
              showNumber:1,//展示两个还是全部
              pinjia_content:'',//评价内容
//              startN:0,//评价了几个小星星
              fuwu_startN:0,//评价了几个小星星,服务态度
              zhongliang_startN:0,//评价了几个小星星，称重准确
              time_startN:0,//评价了几个小星星，时间准时
              zhuanye_startN:0,//评价了几个小星星，操作专业
              showBIGIMG:false,//大图是否显示
              bigIMG:'',//大图是啥
              isSureCancel:false//确认是否取消
            }
        },
        created () {
          this.setTitle(this.title)
        },
        mounted: function () {
          this.order_id = this.$route.params.id
          this.axios.post('/home/Order/orderDetail',{
            token:this.$store.state.token,
            order_id:this.order_id
          }).then((res)=>{
            if(res.data.code==200){
              this.status = res.data.data.status//状态码
              let data = res.data.data
//              if(this.status>=0){
              this.recovery = data.classes//回收类型
//              this.recovery_price = data.price
              this.order_num = data.out_trade_no//订单号
              this.yuyue_user = data.name//预约人员名字
              this.yuyue_adress = data.address//预约地址
              this.yuyue_tel = data.tel//预约人电话
              this.create_time = data.add_time//订单创建的时间
              if(data.com_name){//如果是企业下单
                this.com_name = data.com_name
              }
              if(data.img){//如果有备注图片
                this.imgList = data.img
              }
              this.remark = data.remark
//              }
              if(this.status>=1){//如果已经接单
                this.recovery_name = data.staff_name//回收上门人员名字
                this.recovery_tel = data.staff_tel//回收人员联系电话
                let time1 = lu.getDateDiff(data.yuyue_date.split(':')[0])
                let time2 = data.yuyue_date.split(':')[1]=='0'?'上午':'下午'
                this.recovery_time = time1+' '+time2//回收人员上门时间
              }
              if(this.status>=2){//如果已经支付订单
                this.total = data.total//总价
                this.orderTotal_list = data.detail//订单详情列表
//                this.recovery_weight = data.weight//重量
//                this.recovery_money = data.total_price//单价
              }
              if(this.status>=3){//如果订单已完成，评价完成
                this.pinjia_content = data.judge//评价内容
//                this.startN = data.score//打了几个小星星
                this.fuwu_startN = data.service_score
                this.zhongliang_startN = data.weigh_score
                this.time_startN = data.time_score
                this.zhuanye_startN = data.operation_score
              }
              if(this.status==-2){//如果订单被拒绝
                this.cancel_reason = data.reason//被拒绝的原因
              }
              if(this.status==-1){//如果自己取消订单
                this.cancel_reason = '您已取消订单!'
              }
            }
          })
        },
        methods: {
          linkTOpinjia(){
            this.$router.push('/order/pinjia/'+this.order_id)
          },
          SureCancel(){
            this.isSureCancel = true
          },
          cancelCancelOrder(){
            this.isSureCancel = false
          },
          cancelOrder(){
            this.axios.post('/home/Order/quxiaoOrder',{
              token:this.$store.state.token,
              order_id:this.order_id
            }).then((res)=>{
              if(res.data.code==200){
//                window.history.go(0)
                this.status = -1
                this.cancel_reason = '您已取消订单!'
                this.isSureCancel = false
              }
            })
          },
          show(url){
            this.showBIGIMG = true
            this.bigIMG = url
          },
          closeBIGIMG(){
            this.showBIGIMG = false
            this.bigIMG = ''
          },
          showMore(){
            if(this.orderTotal_title == '展开显示更多'){
              this.orderTotal_title = '收起'
              this.showNumber = this.orderTotal_list.length
            }else{
              this.orderTotal_title = '展开显示更多'
              this.showNumber = 1
            }
            this.showNumber_jiantou = !this.showNumber_jiantou
          }
        }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  @import "//at.alicdn.com/t/font_814275_u2kylnffqa.css";
  .body{
    padding-bottom:1rem;
  }
  /*流程*/
  .processLIST{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height:1.86rem;
    margin-top:.2rem;
    padding:0 .38rem;
  }
  .process_li{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .process_li>span{
    margin-top:.26rem;
    margin-bottom:.57rem;
  }
  .logo_mei{
    width:.41rem;
    height:.41rem;
    background-image: url("img/mei.png");
  }
  i.logo_you{
    background-image: url("img/you.png");
  }
  .shenglue{
    margin-bottom:1.1rem;
  }
  /*如果是企业下单*/
  .isCompanyBOX{
    margin-top: .2rem;
    height:.74rem!important;
  }
  /*订单类型*/
  .orderType{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:.14rem .44rem .31rem .3rem;
    margin-top:.2rem;
  }
  .TYPElogo{
    width:1.2rem;
    height:1.2rem;
    border: 1px solid #ddd;
    position: relative;
  }
  .TYPElogo>i{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .TYPElogo>i.zhi{
    width:.68rem;
    height:.82rem;
    background-image: url("img/zhi.png");
  }
  .TYPElogo>i.suliao{
    width:1.04rem;
    height:.7rem;
    background-image: url("img/suliao.png");
  }
  /*订单信息*/
  .orderInfo{
    margin-top:.2rem;
  }
  .info_list{
    padding:0 .3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height:.6rem;
  }
  .info_list>p{
    text-align: right;
  }
  .infoTYPEBOX>i{
    margin-right:.2rem;
    color: #28AC4F;
    font-size:.32rem;
  }
  .infoTYPEBOX{
    display: flex;
    align-items: center;
    width:40%;
  }
  /*备注信息*/
  .tips{
    padding:0 .3rem;
    margin-top:.2rem;
  }
  .tips>p{
    height:.7rem;
    border-bottom:1px solid #ddd;
    line-height: .7rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .tips>p>i{
    margin-right:.2rem;
    color: #28AC4F;
    font-size:.32rem;
  }
  .tipsBOX{
    padding: 0 .3rem;
  }
  .remarkText{
    line-height: .5rem;
    margin-bottom:.2rem;
    padding:.15rem 0;
  }
  .imgLIST{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom:.2rem;
  }
  .imgLIST img{
    display: inline-block;
    width:1.7rem;
    height:1.7rem;
    margin-right:.2rem;
  }
  /*取消订单按钮*/
  .cancelOrderBTNBOX{
    width:100%;
    height:.94rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    bottom:0;
  }
  .cancelOrderBTNBOX>div{
    width:1.6rem;
    height:.62rem;
    border: 1px solid #28AC4F;
    border-radius: .05rem;
    color: #28AC4F;
    font-size:.28rem;
    text-align: center;
    line-height: .62rem;
    box-sizing: border-box;
    margin-right:.3rem;
  }
  /*回收人员信息*/
  .staffINFO{
    margin-top: .2rem;
  }
  .staffINFO_list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 .3rem;
    height:.6rem;
  }
  /*取消订单*/
  .cancelOrder{
    margin-top:.2rem;
    height:1.87rem;
  }
  .cancelOrder>p:first-child:before{
    content: '';
    display: inline-block;
    width:.05rem;
    height:.34rem;
    background-color: #28AC4F;
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    margin:0 .16rem 0 .3rem;
  }
  .cancelOrder>p:first-child{
    line-height: .86rem;
    position: relative;
    padding-left:.51rem;
  }
  .cancelOrder>p:last-child{
    padding-left:.6rem;
  }
  /*总价*/
  .allTOTAL>p{
    color: #B80F0F;
    font-size:.32rem;
  }
  /*合计信息*/
  .orderTotal{
    margin-top: .2rem;
  }
  .orderTotal_title{
    text-align: center;
    line-height: .79rem;
  }
  .orderTotal>li{
    padding-bottom: .4rem;
  }
  .last_totalINFO_list>span{
    font-weight: bold;
  }
  .totalINFO_list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 .3rem;
    height:.6rem;
  }
  /*订单评价*/
  .pinjiaLIST{
    margin-top:.3rem;
  }
  .pinjiaLIST>li{
    display: flex;
    align-items: center;
    height:.6rem;
  }
  .pinjia{
    margin-top:.2rem;
    /*height:2.81rem;*/
    margin-bottom:.79rem;
    padding-bottom: .3rem;
  }
  .pinjia>p:first-child:before{
    content: '';
    display: inline-block;
    width:.05rem;
    height:.34rem;
    background-color: #28AC4F;
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    margin:0 .16rem 0 .3rem;
  }
  .pinjia>p:first-child{
    line-height: .86rem;
    position: relative;
    padding-left:.51rem;
  }
  .pinjiabox{
    padding-left:.6rem;
  }
  .pinjia_start{
    display: flex;
    align-items: center;
    /*margin-top:.2rem;*/
    margin-left:.3rem;
  }
  .pinjia_start>li{
    margin-right:.2rem;
    width:.36rem;
    height:.34rem;
    background-image: url("img/xing_an.png");
  }
  .pinjia_start>li.active{
    background-image: url("img/xing_liang.png");
  }
  /*去评价按钮*/
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: .39rem auto .79rem;
    border-radius: 5px;
  }

  /*大图*/
  #bigIMG{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background-color: rgba(0,0,0,.6);
    overflow-y: auto;
  }
  #bigIMG::-webkit-scrollbar{
    display: none;
  }
  ::-webkit-scrollbar{
    display: none;
  }
  #bigIMG>img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
  }
  /*确定取消订单弹框*/
  .choice_box{
    width:5.41rem;
    height:2.51rem;
    border-radius: .3rem;
    /*margin:0 auto;*/
    transform: translate(-50%,-50%);
    position: absolute;
    top:50%;
    left:50%;
  }
  .choice_box>p{
    height:1.52rem;
    line-height: 1.52rem;
    text-align: center;
  }
  .choice_btn{
    height:.98rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
  }
  .choice_btn>li:first-child{
    border-right: 1px solid #ddd;
  }
  .choice_btn>li{
    flex:1;
    height:.98rem;
    font-size:.36rem;
    color: #3794E1;
    text-align: center;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    line-height: .98rem;
  }
  /*过渡*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
